<template>
  <div>
    <span>这是课程详情页面</span>
    <button @click="getCourses">点击获取全部课程</button>
    <div v-if="isShow">
      <table border="1">
        <thead>
          <tr>
            <th>课程名称</th>
            <th>课程价格</th>
            <th>授课老师</th>
            <th>开课日期</th>
            <th>结课日期</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(course, index) in courses" :key="index">
            <td>{{ course.course_name }}</td>
            <td>{{ course.course_price }}</td>
            <td>{{ course.course_teacher }}</td>
            <td>{{ course.start_date }}</td>
            <td>{{ course.end_date }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

</template>

<script>
  export default {
    name: "Courses",
    data() {
      return {
        isShow: false,
        courses: []
      }
    },
    methods: {
      getCourses: function () {
        let ts = this;
        this.$axios.get('/api/course/1/')
        .then(function (response) {
          ts.isShow = true;
          ts.courses = response.data;
        })
        .catch(function (error) {
          console.log(error);
      });
      }
    }
  }
</script>

<style scoped>

</style>
